<template>
	<img :src="bg" style="position: absolute; z-index: 0; width: 100vw; height: 100vh" />
	<TopBar v-if="step < 9" />
	<Dialog ref="dialog" />
	<div @click="next" class="animate__animated animate__pulse animate__infinite skip" v-if="step < 9">SKIP</div>
	<!--以下均为预防性侵的模块代码-->

	<!--1、微信聊天视频-->
	<template v-if="step == 1">
		<video id="example_video_1" class="wechat" controls @ended="videoEnd">
			<source src="http://banzhang.wxtsbf.com/activity/0/1651161778023/wechat.mp4" type="video/mp4" />
		</video>
		<svg v-show="showVideoBtn" @click="playVideo" style="position: absolute; width: 10vw; top: 50%; left: 50%; transform: translate(-50%, -50%)" t="1650166145779" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2571" width="200" height="200"><path d="M938.666667 138.666667v746.666666a53.393333 53.393333 0 0 1-53.333334 53.333334H138.666667a53.393333 53.393333 0 0 1-53.333334-53.333334V138.666667a53.393333 53.393333 0 0 1 53.333334-53.333334h746.666666a53.393333 53.393333 0 0 1 53.333334 53.333334z m-230.12 342.173333l-266.666667-175.966667A37.333333 37.333333 0 0 0 384 336.033333V688a37.333333 37.333333 0 0 0 57.9 31.16l266.666667-176a37.333333 37.333333 0 0 0 0-62.32z" fill="#5C5C66" p-id="2572"></path></svg>
	</template>

	<!--step 2-->
	<template v-else-if="step == 2">
		<img :src="故事1" class="animate__animated animate__fadeIn" />
		<img :src="对话3" class="animate__animated animate__fadeIn" style="position: absolute; right: 28vw; top: 28vh; animation-delay: 1s; width: 25%; height: auto" />
		<img :src="对话4" class="animate__animated animate__fadeIn" style="position: absolute; right: 10vw; top: 50vh; animation-delay: 2s; width: 33%; height: auto" @animationend="endStep2" />
	</template>

	<!--step 3-->
	<template v-else-if="step == 3">
		<div class="swiper" id="step3Swiper">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img :src="故事2" class="animate__animated animate__fadeIn" />
					<!--拖拽区域-->
					<div class="dragArea">
						<div class="target animate__animated animate__pulse animate__infinite" v-show="showDragTarget"></div>
						<Vue3DraggableResizable :draggable="true" :resizable="false" v-model:x="state.x1" v-model:y="state.y1" @drag-start="dragStart" @drag-end="dragEnd"><img :src="money" /> </Vue3DraggableResizable>
						<Vue3DraggableResizable :draggable="true" :resizable="false" v-model:x="state.x2" v-model:y="state.y2" @drag-start="dragStart" @drag-end="dragEnd"> <img :src="tang" /> </Vue3DraggableResizable>
					</div>
				</div>
				<div class="swiper-slide">
					<img :src="故事3" class="animate__animated animate__fadeIn" />
				</div>
				<div class="swiper-slide">
					<img :src="故事4" class="animate__animated animate__fadeIn" />
				</div>
			</div>
		</div>
	</template>

	<!-- 奖励组件-->
	<!-- <template v-else-if="step == 4"> </template> -->
	<!--step 4 结束语引导-->
	<template v-else-if="step == 4">
		<div class="driverText">
			<p class="pinkColor animate__animated animate__fadeIn" style="margin-left: -4%">“我家是男孩子没有关系”</p>
			<p class="whiteColor animate__animated animate__fadeIn" style="animation-delay: 1s">数据现实，儿童性侵80%都是熟人作案<br />平均每天至少有2个孩子遭遇性侵<br />更有匿名调查公布 受侵犯的男孩数量比女孩还要多出2.7%</p>
			<p class="pinkColor animate__animated animate__fadeIn" style="animation-delay: 2s">儿童性侵，不分性别</p>
			<p class="whiteColor animate__animated animate__fadeIn" style="animation-delay: 3s">
				多多关注孩子的身边人，不忽视孩子的小情绪<br />
				更警惕熟人的不正常举动，让孩子免受侵害
			</p>
		</div>
	</template>
	<!--step 5 犯罪档案-->
	<template v-else-if="step == 5">
		<img :src="fzdaUrl" class="animate__animated animate__fadeIn" @touchstart="getTouchStart" @touchend="getTouchEnd" v-if="!showFzDn2" />
		<van-circle v-model:current-rate="currentRate" :rate="100" :speed="30" :text="text" v-if="showCircle" />
		<van-loading type="spinner" class="van-circle" size="54px" color="#0094ff" v-if="showCircle" style="margin-top: -16px" />
		<img :src="fzda2Url" class="animate__animated animate__fadeIn" v-if="showFzDn2" />
	</template>
	<!--step 6 保护手册1-->
	<template v-else-if="step == 6">
		<div class="swiper" id="step6Swiper">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img :src="保护手册0" class="animate__animated animate__fadeIn" @click="step6toNext" />
				</div>
				<div class="swiper-slide">
					<img :src="保护手册1" class="animate__animated animate__fadeIn" />
					<p class="animate__animated animate__fadeIn" style="animation-delay: 1s; position: absolute; color: black; z-index: 9; bottom: 0; font-size: 1.5rem; text-align: center; width: 100%">
						小背心和小裤衩遮住的地方都是隐私部位<br />
						任何人都不可以触碰哦～
					</p>
				</div>
				<div class="swiper-slide">
					<img :src="保护手册2" class="animate__animated animate__fadeIn" />
					<p class="animate__animated animate__fadeIn" style="animation-delay: 1s; position: absolute; color: white; z-index: 9; bottom: 0; font-size: 1.5rem; text-align: center; width: 1.5rem; transform: scale(0.8); left: 16%; top: 0">如果有人告诉你 这件事不要告诉家长</p>
					<p class="animate__animated animate__fadeIn" style="animation-delay: 1.5s; position: absolute; color: white; z-index: 9; bottom: 0; font-size: 1.5rem; text-align: center; width: 1.5rem; transform: scale(0.8); right: 16%; top: 0">那么一定要教孩子告诉家长<br />！</p>
				</div>
			</div>
		</div>
	</template>
	<!--step 7 5件事情-->
	<template v-else-if="step == 7">
		<img :src="这五件事" class="animate__animated animate__fadeIn" />
	</template>

	<!--step 8 5件事情-->
	<!-- <template v-else-if="step == 8">
		<img :src="保护手册2" class="animate__animated animate__fadeIn" />
	</template> -->

	<!-- <template v-else-if="step == 5"> </template> -->
</template>
<script setup>
import { ref, onMounted, watch, nextTick, computed, reactive } from "vue";
import { ImagePreview } from 'vant';
import TopBar from "./common/Top.vue";
import Dialog from "./common/Dialog.vue";
const bg = "./img/bg.jpg";
const wechatMp4 = "./img/wechat.mp4";
const 故事1 = "./img/故事1.jpg";
const 故事2 = "./img/故事2.jpg";
const 故事3 = "./img/故事3.jpg";
const 故事4 = "./img/故事4.jpg";
const 对话3 = "./img/对话3.png";
const 对话4 = "./img/对话4.png";
const fzdaUrl = "./img/犯罪档案1.jpg";
const fzda2Url = "./img/犯罪档案2.jpg";

const money = "./img/money.png";
const tang = "./img/tang.png";
const state = reactive({
	x1: document.body.clientWidth * 0.7,
	y1: document.body.clientWidth * 0.1,
	x2: document.body.clientWidth * 0.7,
	y2: document.body.clientHeight * 0.5,
});

const 保护手册0 = "./img/儿童保护手册.png";
const 保护手册1 = "./img/保护手册1.jpg";
const 保护手册2 = "./img/保护手册2.jpg";

const 这五件事 = "./img/这五件事.png";
//dialog对象
const dialog = ref(null);

const props = defineProps({
	nowModule: {
		type: String,
		default: "预防性侵",
	},
});
//流程控制
const step = ref(1);
const next = () => {
	step.value++;
};
defineExpose({
	step,
});

//监听step
watch(step, (newValue, oldValue) => {
	const lastValue = 8;
	if (newValue == 1) {
	}
	if (newValue == 2) {
		document.getElementById("bgMusic").pause();
		document.getElementById("sound1").currentTime = 0;
		document.getElementById("sound1").play();
	}
	if (oldValue == 2) {
		document.getElementById("sound1").pause();
		if (window.bgStatus) {
			document.getElementById("bgMusic").play();
		}
	}
	if (newValue === 3) {
		initSwiper();
		document.getElementById("bgMusic").pause();
		document.getElementById("sound2").currentTime = 0;
		document.getElementById("sound2").play();
	}
	if (oldValue == 3) {
		document.getElementById("sound2").pause();
		if (window.bgStatus) {
			document.getElementById("bgMusic").play();
		}
	}
	if (oldValue == 3 || oldValue == 6) {
		mySwiper.destroy(false);
	}
	if (newValue == 5) {
		showFzDn2.value = false;
	}
	if (newValue == 6) {
		nextTick(() => {
			mySwiper = new Swiper("#step6Swiper", {
				autoplay: false,
			});
		});
	}
	if (newValue > lastValue) {
		step.value = lastValue;
	}
	if (newValue == lastValue) {
		//结束弹窗
		dialog.value.show({
			msg: "恭喜你！游戏结束",
			btns: [
				{
					text: "A.返回首页",
					onclick: function () {
						window.toIndex();
					},
				},
				{
					text: "B.其他模块",
					onclick: function () {
						window.toSelectModule();
					},
				},
			],
		});
	}
});

const showVideoBtn = ref(true);
const playVideo = () => {
	showVideoBtn.value = false;
	document.querySelector("video").play();
};
//视频播放完毕之后
const videoEnd = () => {
	step.value = 2;
};

//step2 动画结束之后
let mySwiper = null;
const initSwiper = () => {
	(state.x1 = document.body.clientWidth * 0.7), (state.y1 = document.body.clientWidth * 0.1), (state.x2 = document.body.clientWidth * 0.7), (state.y2 = document.body.clientHeight * 0.5), (showDragTarget.value = false);
	nextTick(() => {
		mySwiper = new Swiper("#step3Swiper", {
			allowTouchMove: false,
			speed: 800,
			effect: "fade",
			fadeEffect: {
				crossFade: true,
			},
			autoplay: {
				delay: 5000,
				stopOnLastSlide: true,
				disableOnInteraction: true,
			},
			on: {
				slideChangeTransitionEnd: function () {
					if (this.activeIndex === 2) {
						setTimeout(() => {
							endStep3();
						}, 1000);
					}
				},
			},
		});
		//第一幕停止
		mySwiper.autoplay.stop();
	});
};
const endStep2 = () => {
	dialog.value.show({
		msg: "你该怎么做？",
		btns: [
			{ text: "A.不以为然，认为孩子在撒娇" },
			{
				text: "B.询问孩子发生了什么",
				onclick: function () {
					step.value = 3;
				},
			},
		],
	});
};
const endStep3 = () => {
	dialog.value.show({
		msg: "男孩不可能遇到性侵害，熟人间不会发生性侵害。",
		btns: [
			{
				text: "A.正确",
				onclick: function () {
					//出现奖励组件 然后结束语
					showStep5();
				},
			},
			{
				text: "B.错误",
				onclick: function () {
					ImagePreview(['./img/选择错误图片.jpg']);
				},
        autoClose:false
			},
		],
	});
};
//拖拽
const showDragTarget = ref(false);
let xArea = [document.body.clientWidth * 0.04, document.body.clientWidth * 0.4];
const dragStart = () => {
	showDragTarget.value = true;
};
const dragEnd = () => {
	if (state.x1 < xArea[1] && state.x1 >= xArea[0]) {
		if (state.x2 < xArea[1] && state.x2 >= xArea[0]) {
			setTimeout(() => {
				mySwiper.slideNext();
				mySwiper.autoplay.start();
			}, 200);
		}
	}
};

const showStep5 = () => {
	$("#step3Swiper").fadeOut();
	setTimeout(() => {
		step.value = 5;
	}, 1500);
};

//犯罪档案
const showFzDn2 = ref(false);
const showCircle = ref(false);
const currentRate = ref(0);
const text = computed(() => currentRate.value.toFixed(0) + "%");
const getTouchStart = () => {
	showCircle.value = true;
	currentRate.value = 0;
	showFzDn2.value = false;
};
const getTouchEnd = () => {
	showCircle.value = false;
};
watch(currentRate, (newValue, oldValue) => {
	if (newValue >= 100) {
		showCircle.value = false;
		showFzDn2.value = true;
	}
});

const step6toNext = () => {
	mySwiper.slideNext();
};
</script>
<style scoped>
img {
	width: 100vw;
	height: 100vh;
}
.wechat {
	height: 100%;
	width: 60%;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background: transparent;
}
video::-webkit-media-controls,
video::-moz-media-controls,
video::-webkit-media-controls-enclosure {
	display: none !important;
}

video::-webkit-media-controls-panel,
video::-webkit-media-controls-panel-container,
video::-webkit-media-controls-start-playback-button {
	display: none !important;
	-webkit-appearance: none;
}
.skip {
	position: absolute;
	bottom: 20px;
	right: 20px;
	color: white;
	font-size: medium;
	font-weight: bolder;
	font-size: 2.6rem;
	z-index: 999;
}
.swiper {
	width: 100vw;
	height: 100vh;
}
.maskBlack {
	background: black;
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;
}
.driverText .pinkColor {
	color: #f1b6b4;
	font-size: 2.5rem;
	transform: skewX(-35deg);
	transform-origin: left bottom;
}
.driverText .whiteColor {
	color: #ffffff;
	font-size: 1.5rem;
}
.driverText {
	position: relative;
	display: flex;
	flex-flow: column;
	justify-content: space-around;
	width: 100vw;
	height: 80%;
	padding-left: 10%;
	top: 50%;
	transform: translateY(-50%);
}
.van-circle {
	position: absolute;
	width: 50vw;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.dragArea {
	width: 100%;
	height: calc(100vh - 60px);
	position: absolute;
	bottom: 0;
}
.dragArea img {
	width: 10vw;
	height: 10vw;
}
.dragArea .target {
	width: 36%;
	height: 99%;
	position: absolute;
	left: 4%;
	transform: translateY(-50%);
	background: #272727;
	opacity: 0.5;
}
.vdr-container.active {
	border: none;
}
</style>
<style>
.van-circle svg {
	display: none;
}
</style>
